<template>
    <div
        style="width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;flex-direction: column;">
        <div style="height: 10%;">
            <h1 style="font-size: 33px;">学业预警系统</h1>
        </div>
        <div style="display: flex; height: 85%;width: 100%; justify-content: space-between; align-items: center;">
            <el-form :model="form" style="width: 40%;margin-left: 5%;">
                <el-form-item>
                    <a class="form-label">本次预警总数：</a>
                    <strong class="form-value" style="font-size: 40px;">{{form.totalNum}}</strong>
                </el-form-item>
                <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                <el-form-item>
                    <a class="form-label">成绩预警人数：</a>
                    <strong class="form-value">{{form.gradeNum}}</strong>
                </el-form-item>
                <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                <el-form-item>
                    <a class="form-label">考勤预警人数：</a>
                    <strong class="form-value">{{form.attendanceNum}}</strong>
                </el-form-item>
                <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                <el-form-item>
                    <a class="form-label">学分预警人数：</a>
                    <strong class="form-value">{{form.readExamNum}}</strong>
                </el-form-item>
                <el-divider style="margin-top: -5px;margin-bottom: 5px;"></el-divider>
                <el-form-item>
                    <a class="form-label">作业预警人数：</a>
                    <strong class="form-value">{{form.homeworkNum}}</strong>
                </el-form-item>
                <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                <el-form-item>
                    <a class="form-label">在校生总数：</a>
                    <strong class="form-value">{{form.studentsNum}}</strong>
                </el-form-item>
            </el-form>
            <div style="width: 45%;margin-right: 5%;">
                <el-form :model="form" >
                    <el-form-item>
                        <a class="form-label">马克思主义学院人数：</a>
                        <strong class="form-value" >{{form.homeworkNum}}</strong>
                    </el-form-item>
                    <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                    <el-form-item>
                        <a class="form-label">医学院人数：</a>
                        <strong class="form-value">{{form.homeworkNum}}</strong>
                    </el-form-item>
                    <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                    <el-form-item>
                        <a class="form-label">财经政法学院人数：</a>
                        <strong class="form-value">{{form.homeworkNum}}</strong>
                    </el-form-item>
                    <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                    <el-form-item>
                        <a class="form-label">音乐与体育学院人数：</a>
                        <strong class="form-value">{{form.homeworkNum}}</strong>
                    </el-form-item>
                    <el-divider style="margin-top: -5px;margin-bottom: 5px;"></el-divider>
                    <el-form-item>
                        <a class="form-label">信息工程学院人数：</a>
                        <strong class="form-value">{{form.homeworkNum}}</strong>
                    </el-form-item>
                    <el-divider style="margin-top: -10px;margin-bottom: 5px;"></el-divider>
                    <el-form-item>
                        <a class="form-label">文化与传媒学院人数：</a>
                        <strong class="form-value">{{form.homeworkNum}}</strong>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    const form = ref({
        totalNum: '99',
        studentsNum: '123456',
        gradeNum: '20',
        attendanceNum: '20',
        readExamNum: '20',//学分
        homeworkNum: '20',
    })

    const onSubmit = () => {
        console.log('submit!')
    }
</script>

<style scoped>
    .form-label {
        font-size: 25px;
        font-weight: bold;
        color: #333;
    }

    .form-value {
        font-size: 25px;
        color: #f00;
    }
</style>